<template>
  <div class="app-container">
    <el-form :data="form" inline>
      <el-form-item label="账户类型：" prop="userType">
        <el-select v-model="form.userType">
          <el-option
            v-for="item in consts.ACCOUNT_TYPE"
            :label="item.title"
            :value="item.value"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账户名：" prop="userName">
        <el-input v-model="form.userName"></el-input>
      </el-form-item>

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>

    </el-form>
    <el-table
      border :data="tableData.list"
      show-summary
      :summary-method="getSummaries"
      v-loading="loading" element-loading-text="加载中..." class="el-table-align-center">
      <el-table-column label="账户类型" fixed="left" width="120" align="center">
        <template slot-scope="{row}">
          {{row.userType | toConverter('ACCOUNT_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="账户名" align="center" fixed="left" width="120">
        <template slot-scope="{row}">
          {{row.userName}}
        </template>
      </el-table-column>
       <el-table-column label="首存数" align="center" prop="firstRechargeNum">
        </el-table-column>
        <el-table-column label="首存金额" align="center" width="150" prop="firstRechargeSum">
          <template slot-scope="{row}">
            {{row.firstRechargeSum | currency}}
          </template>
        </el-table-column>
       <el-table-column label="存款数" align="center" prop="rechargeNum">
        </el-table-column>
       <el-table-column label="取款数" align="center" prop="withdrawNum">
        </el-table-column>
        <el-table-column label="存款额度" align="center" width="150" prop="rechargeSum">
          <template slot-scope="{row}">
            {{row.rechargeSum | currency}}
          </template>
        </el-table-column>
        <el-table-column label="取款额度" align="center" width="150" prop="withdrawSum">
          <template slot-scope="{row}">
            {{row.withdrawSum | currency}}
          </template>
        </el-table-column>
        <el-table-column label="投注额度" align="center" width="150" prop="bettingSum">
          <template slot-scope="{row}">
            {{row.bettingSum | currency}}
          </template>
        </el-table-column>
        <el-table-column label="公司输赢" align="center" width="150" prop="winSum">
          <template slot-scope="{row}">
            {{  row.winSum | currency}}
          </template>
        </el-table-column>
        <el-table-column label="红利（加币）" align="center" width="150" prop="bonusSum">
          <template slot-scope="{row}">
            {{row.bonusSum | currency}}
          </template>
        </el-table-column>
        <el-table-column label="返水" align="center" width="150" prop="rebateSum">
          <template slot-scope="{row}">
            {{row.rebateSum | currency}}
          </template>
        </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>


<script>

  import {
    reportCompanySubListApi as listApi,
  } from '@/services/api/report';

  import {form, grid, dialog,handleDownload} from '@/build'

  export default {
    name: 'report-company-thirdlist',
    components: {},
    props:['today','rowData'],
    mixins: [form, grid, dialog,handleDownload],
    data() {
      return {
        tableData: {
          list:[],
          total:0,
        },
        form:{
          userName: undefined,
          userType: -1,
        },
        filters: {
          size: 20,
          page: 1,
          parentId: 1,
        },
        filterDateType: false,
      }
    },
    methods: {
      submitFilterForm(){
        this.filters = {...this.filters,...this.form}
        this.getAll()
      },
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return _.currency(prev + curr);
              } else {
                return _.currency(prev);
              }
            }, 0);
          }
        });

        return sums;
      }
    },
    mounted() {
      if(!_.isUndefined(this.rowData)){
        const parentId = this.rowData.uid
        this.filters.parentId = parentId
      }
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });
      this.getAll()
    }

  }
</script>

<style lang="scss" scoped>
</style>

